<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>图表统计</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/iconfont.css" />
  <link rel="stylesheet" href="./css/main.css" />
  <link rel="stylesheet" href="./libs/layui/css/modules/layer/default/layer.css" />
  <link rel="stylesheet" href="./libs/layui/css/layui.css" />

  <script src="./libs/jquery/jquery.min.js"></script>
  <script src="./libs/layui/layui.js"></script>
  <script src="./libs/echarts.js"></script>

  <script src="./js/jqconfig.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row spannel_list" id="dataBox">
      <div class="col-sm-3 col-xs-6">
        <div class="spannel totalCount">
          <em></em><span>篇</span>
          <b>总文章数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor01 totalCount_day">
          <em></em><span>篇</span>
          <b>日新增文章数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor02 commentCount">
          <em></em><span>条</span>
          <b>评论总数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor03 commentCount_day">
          <em></em><span>条</span>
          <b>日新增评论数</b>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row curve-pie">
      <div class="col-lg-8 col-md-8">
        <div class="gragh_pannel" id="day_article_show"></div>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="gragh_pannel" id="pie_show"></div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="column_pannel" id="column_show"></div>
  </div>
  <script>
    //头部

    $(function () {
      getDataInfo();
      getDayArticleShow();
      get_pie_show();
    });
    //1.0获取统计数据
    function getDataInfo() {
      $.ajax({
        type: "get",
        url: "/admin/data/info",
        success: (res) => {
          // console.log(res);
          const { totalArticle, dayArticle, totalComment, dayComment } = res;
          // console.log($("#dataBox").find("em").eq(0));
          $("#dataBox").find("em").eq(0).text(totalArticle);
          $("#dataBox").find("em").eq(1).text(dayArticle);
          $("#dataBox").find("em").eq(2).text(totalComment);
          $("#dataBox").find("em").eq(3).text(dayComment);
        },
      });
    }

    //2.0生成日新增文章折线图
    function dayArticleShow(date) {
      let myChart = echarts.init(document.querySelector("#day_article_show"));
      option = {
        title: {
          text: "日新增文章趋势",
          left: "center",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date.map((item) => item.date),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: date.map((item) => item.count),
            type: "line",
            smooth: true,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "red",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
    }

    //2.1获取日新增文章统计数
    function getDayArticleShow(params) {
      $.ajax({
        type: "get",
        url: "/admin/data/article",
        success: (res) => {
          // console.log(res);
          const { date } = res;
          // console.log(date);

          dayArticleShow(date);
          init_bar(date);
        },
      });
    }
    //3.0 init_pie 获取分类饼状图
    function init_pie(date) {
      let myChart = echarts.init($("#pie_show")[0]);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#5885e8", "#13cfd5", "#00ce68", "#ff9565", "#20ff19"],
        legend: {
          data: date.map((item) => item.name),
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["45%", "60%"],
            labelLine: {
              length: 30,
            },

            data: date.map((item) => ({
              value: item.articles,
              name: item.name,
            })),
          },
        ],
      };

      myChart.setOption(option);
    }
    //3.0 各类型文章数量统计
    function get_pie_show() {
      $.ajax({
        type: "get",
        url: "/admin/data/category",
        success: (res) => {
          // console.log(res);
          const { date } = res;
          init_pie(date);
        },
      });
    }
    //4.0获取日新增文章数量统计柱状图
    function init_bar(date) {
      let myChart = echarts.init($("#column_show")[0]);
      let option = {
        xAxis: {
          type: "category",
          data: date.map((item) => item.date),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: date.map((item) => item.count),
            type: "bar",
            barWidth: "50%",
          },
        ],
      };
      myChart.setOption(option);
    }
  </script>
</body>

</html>